<style lang="scss" scoped>
  .patient-profile{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      line-height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      margin-bottom: 5px;
    }
    .chose-date{
      width: 100%;
      height: 25px;
      .date-nav{
        margin-right: 25px;
        font-size: 14px;
        color: #fff;
        width: 70px;
        height: 23px;
        line-height: 23px;
        display: flex;
        float: right;
        justify-content: space-around;
        border: 1px solid #00B4FF;
        border-radius: 15px;
        .date-day{
          cursor: pointer;
        }
        .date-month{
          cursor: pointer;
        }
      }
    }
    &_content{
      height: calc(100% - 75px);
      overflow: hidden;
      .content-box{
        height: 50%;
        color: #fff;
        .content-top{
          display: flex;
          justify-content: space-evenly;
        }
        .content-num{
          font-size: 30px;
          text-decoration: underline;
        }
        .content-name{
          text-align: center;
        }
      }
    }
  }
</style>

<template>
  <div class="patient-profile">
    <div class="patient-profile_title">
      <span>{{ profileTitle }}</span>
    </div>
    <div class="chose-date">
      <div class="date-nav">
        <span class="date-day" :style="{color: isDay ? '#fff' : '#00B4FF'}" @click="clickDay">日</span>
        <span>|</span>
        <span class="date-month" :style="{color: isMonth ? '#fff' : '#00B4FF'}" @click="clickMonth">月</span>
      </div>
    </div>
    <div class="patient-profile_content">
      <el-col :span="12" style="height: 50%;">
        <div class="content-box">
          <div class="content-top">
            <span class="content-num">{{ emergNumber }}</span>
            <span style="line-height: 30px;"><i :style="{color: isEmergNum == '' ? '' : isEmergNum == 'top' ? '#FFD300' : isEmergNum == 'bottom' ? '#59BCFB' : ''}" :class=" isEmergNum == '' ? '' : isEmergNum == 'top' ? 'el-icon-caret-top' : isEmergNum == 'bottom' ? 'el-icon-caret-bottom' : '' " />{{ emergNumberRatio }}%</span>
          </div>
          <div class="content-name">{{ emergTitle }}</div>
        </div>
      </el-col>
      <el-col :span="12" style="height: 50%;">
        <div class="content-box">
          <div class="content-top">
            <span class="content-num">{{ PCINumber }}</span>
            <span style="line-height: 30px;"><i :style="{color: isPCI == '' ? '' : isPCI == 'top' ? '#FFD300' : isPCI == 'bottom' ? '#59BCFB' : ''}" :class=" isPCI == '' ? '' : isPCI == 'top' ? 'el-icon-caret-top' : isPCI == 'bottom' ? 'el-icon-caret-bottom' : '' " />{{ PCINumberRatio }}%</span>
          </div>
          <div class="content-name">{{ PCITitle }}</div>
        </div>
      </el-col>
      <el-col :span="12" style="height: 50%;">
        <div class="content-box">
          <div class="content-top">
            <span class="content-num">{{ outNumber }}</span>
            <span style="line-height: 30px;"><i :style="{color: isOut == '' ? '' : isOut == 'top' ? '#FFD300' : isOut == 'bottom' ? '#59BCFB' : ''}" :class=" isOut == '' ? '' : isOut == 'top' ? 'el-icon-caret-top' : isOut == 'bottom' ? 'el-icon-caret-bottom' : '' " />{{ outNumberRatio }}%</span>
          </div>
          <div class="content-name">{{ outTitle }}</div>
        </div>
      </el-col>
      <el-col :span="12" style="height: 50%;">
        <div class="content-box">
          <div class="content-top">
            <span class="content-num">{{ uploadNumber }}</span>
            <span style="line-height: 30px;"><i :style="{color: isUpload == '' ? '' : isUpload == 'top' ? '#FFD300' : isUpload == 'bottom' ? '#59BCFB' : ''}" :class="isUpload == '' ? '' : isUpload == 'top' ? 'el-icon-caret-top' : isUpload == 'bottom' ? 'el-icon-caret-bottom' : '' " />{{ uploadNumberRatio }}%</span>
          </div>
          <div class="content-name">{{ uploadTitle }}</div></div>
      </el-col>
    </div>
  </div>
</template>

<script>
import { getPatientNumber, getStrokePatientNumber, getTraumaPatientNumber } from '@/api/comprehensive/patientProfile'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null,
      isDay: true,
      isMonth: false,
      profileTitle: '胸痛患者人次概要',
      profileTime: 'month',
      emergNumber: 0,
      emergNumberRatio: 0,
      isEmergNum: '',
      emergTitle: '急诊胸痛人次数',
      PCINumber: 0,
      PCINumberRatio: 0,
      isPCI: '',
      PCITitle: '手术例数',
      outNumber: 0,
      outNumberRatio: 0,
      isOut: '',
      outTitle: '出院人次数',
      uploadNumber: 0,
      uploadNumberRatio: 0,
      isUpload: '',
      uploadTitle: '上报病例数'
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      // this.clearData()
      if (this.isStrock == 'chestPain') {
        this.profileTitle = '胸痛患者人次概要'
        this.emergTitle = '急诊胸痛人次数'
        this.PCITitle = '手术例数'
        this.outTitle = '出院人次数'
        this.uploadTitle = '上报病例数'
        getPatientNumber({
          hospitalId: this.$store.getters.hospitalId,
          classify: this.profileTime,
          apiToken: this.$store.getters.apiToken
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              this.emergNumber = res.data.numberCP ? res.data.numberCP : 0
              this.emergNumberRatio = res.data.growthRatioCP ? res.data.growthRatioCP : 0
              this.isEmergNum = res.data.growthRatioCP ? res.data.growthRatioCP > 0 ? 'top' : res.data.growthRatioCP < 0 ? 'bottom' : '' : ''
              this.PCINumber = res.data.numberPCI ? res.data.numberPCI : 0
              this.PCINumberRatio = res.data.growthRatioPCI ? res.data.growthRatioPCI : 0
              this.isPCI = res.data.growthRatioPCI ? res.data.growthRatioPCI > 0 ? 'top' : res.data.growthRatioPCI < 0 ? 'bottom' : '' : ''
              this.outNumber = res.data.numberOut ? res.data.numberOut : 0
              this.outNumberRatio = res.data.growthRatioOut ? res.data.growthRatioOut : 0
              this.isOut = res.data.growthRatioOut ? res.data.growthRatioOut > 0 ? 'top' : res.data.growthRatioOut < 0 ? 'bottom' : '' : ''
              this.uploadNumber = res.data.numberUploadCPC ? res.data.numberUploadCPC : 0
              this.uploadNumberRatio = res.data.growthRatioUploadCPC ? res.data.growthRatioUploadCPC : 0
              this.isUpload = res.data.growthRatioUploadCPC ? res.data.growthRatioUploadCPC > 0 ? 'top' : res.data.growthRatioUploadCPC < 0 ? 'bottom' : '' : ''
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        this.profileTitle = '卒中患者人次概要'
        this.emergTitle = '急诊卒中人次数'
        this.PCITitle = '出院人次数'
        this.outTitle = '手术例数'
        this.uploadTitle = '上报病例数'
        getStrokePatientNumber({
          hospitalId: this.$store.getters.hospitalId,
          classify: this.profileTime,
          apiToken: this.$store.getters.apiToken
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              this.emergNumber = res.data.numberStroke ? res.data.numberStroke : 0
              this.emergNumberRatio = res.data.growthRatioStroke ? res.data.growthRatioStroke : 0
              this.isEmergNum = res.data.growthRatioStroke ? res.data.growthRatioStroke > 0 ? 'top' : res.data.growthRatioStroke < 0 ? 'bottom' : '' : ''
              this.PCINumber = res.data.numberOut ? res.data.numberOut : 0
              this.PCINumberRatio = res.data.growthRatioOut ? res.data.growthRatioOut : 0
              this.isPCI = res.data.growthRatioOut ? res.data.growthRatioOut > 0 ? 'top' : res.data.growthRatioOut < 0 ? 'bottom' : '' : ''
              this.outNumber = res.data.numberSurgery ? res.data.numberSurgery : 0
              this.outNumberRatio = res.data.growthRatioSurgery ? res.data.growthRatioSurgery : 0
              this.isOut = res.data.growthRatioSurgery ? res.data.growthRatioSurgery > 0 ? 'top' : res.data.growthRatioSurgery < 0 ? 'bottom' : '' : ''
              this.uploadNumber = res.data.numberUpload ? res.data.numberUpload : 0
              this.uploadNumberRatio = res.data.growthRatioUpload ? res.data.growthRatioUpload : 0
              this.isUpload = res.data.growthRatioUpload ? res.data.growthRatioUpload > 0 ? 'top' : res.data.growthRatioUpload < 0 ? 'bottom' : '' : ''
            }
          }
        })
      } else if (this.isStrock == 'trauma') {
        this.profileTitle = '创伤患者人次概要'
        this.emergTitle = '急诊创伤人次数'
        this.PCITitle = '出院人次数'
        this.outTitle = '紧急手术例数'
        this.uploadTitle = '危垂人次数'
        getTraumaPatientNumber({
          hospitalId: this.$store.getters.hospitalId,
          classify: this.profileTime
        }).then(res => {
          console.log(res, 'res')
          if (res.code == 0) {
            if (res.data) {
              this.emergNumber = res.data.numberTrauma ? res.data.numberTrauma : 0
              this.emergNumberRatio = res.data.growthRatioTrauma ? res.data.growthRatioTrauma : 0
              this.isEmergNum = res.data.growthRatioTrauma ? res.data.growthRatioTrauma > 0 ? 'top' : res.data.growthRatioTrauma < 0 ? 'bottom' : '' : ''
              this.PCINumber = res.data.numberOut ? res.data.numberOut : 0
              this.PCINumberRatio = res.data.growthRatioOut ? res.data.growthRatioOut : 0
              this.isPCI = res.data.growthRatioOut ? res.data.growthRatioOut > 0 ? 'top' : res.data.growthRatioOut < 0 ? 'bottom' : '' : ''
              this.outNumber = res.data.numberSurgery ? res.data.numberSurgery : 0
              this.outNumberRatio = res.data.growthRatioSurgery ? res.data.growthRatioSurgery : 0
              this.isOut = res.data.growthRatioSurgery ? res.data.growthRatioSurgery > 0 ? 'top' : res.data.growthRatioSurgery < 0 ? 'bottom' : '' : ''
              this.uploadNumber = res.data.numberCritical ? res.data.numberCritical : 0
              this.uploadNumberRatio = res.data.growthRatioCritical ? res.data.growthRatioCritical : 0
              this.isUpload = res.data.growthRatioCritical ? res.data.growthRatioCritical > 0 ? 'top' : res.data.growthRatioCritical < 0 ? 'bottom' : '' : ''
            }
          }
        })
      }
    },
    clickDay() {
      if (this.isDay) {
        this.isDay = !this.isDay
        this.isMonth = true
        this.profileTime = 'day'
        this.init()
      }
    },
    clickMonth() {
      if (this.isMonth) {
        this.isMonth = !this.isMonth
        this.isDay = true
        this.profileTime = 'month'
        this.init()
      }
    },
    clearData() {
      this.emergNumber = 0
      this.emergNumberRatio = 0
      this.isEmergNum = ''
      this.PCINumber = 0
      this.PCINumberRatio = 0
      this.isPCI = ''
      this.outNumber = 0
      this.outNumberRatio = 0
      this.isOut = ''
      this.uploadNumber = 0
      this.uploadNumberRatio = 0
      this.isUpload = ''
    }
  }
}
</script>
